<template>
    <div>
        <mt-header fixed title="新闻" id="head"></mt-header>

        <mt-search cancel-text="取消" placeholder="搜索" v-model="value" @input.native="searchList($event)"></mt-search>
          

          <div class="page-navbar">  
    <mt-navbar class="page-part" v-model="selected">  
      <mt-tab-item id="1">体育</mt-tab-item>  
      <mt-tab-item id="2">科技</mt-tab-item>  
      <mt-tab-item id="3">汽车</mt-tab-item>  
      <mt-tab-item id="4">政治</mt-tab-item>  
    </mt-navbar>  
    <!-- tabcontainer -->  
    <mt-tab-container v-model="selected">  
      <mt-tab-container-item id="1">  
      <div class="box" v-for="(sportsNews,index) in sportsNews" :key="index">
                <div class="title">
                
 <div class="pic" v-html="sportsNews.pic">{{sportsNews.pic}}</div>
  <span class="news">{{sportsNews.title}}</span>
  <span class="date">{{sportsNews.date}}</span>

                </div>
            </div> 
      </mt-tab-container-item>  
      <mt-tab-container-item id="2">  
        <div class="box" v-for="(scienceNews,index) in scienceNews" :key="index">
                <div class="title">
                    <p>{{scienceNews.title}}</p>
                </div>
            </div>  
      </mt-tab-container-item>  
      <mt-tab-container-item id="3">  
         <div class="box" v-for="(carNews,index) in carNews" :key="index">
                <div class="title">
                    <p>{{carNews.title}}</p>
                </div>
            </div>  
      </mt-tab-container-item>  
         <mt-tab-container-item id="4">  
        <div class="box" v-for="(governmentNews,index) in governmentNews" :key="index">
                <div class="title">
                    <p>{{governmentNews.title}}</p>
                </div>
            </div>  
      </mt-tab-container-item> 
    </mt-tab-container>  
  </div>  
            





            
    </div>
</template>


<script>
 import {mapGetters,mapActions} from 'vuex';
export default {  
  
  name: 'page-navbar',  
  
  data() {  
    return {  
      selected: '1'  
    };  
  },

    computed:{
      ...mapGetters(['sportsNews','scienceNews','carNews','governmentNews']),
  },
  methods:{
      ...mapActions(['getsportsNews','getscienceNews','getcarNews','getgovernmentNews']),
      searchList(e) {
      var val = e.target.value;
      this.getNewsList({ title: val });
    }
  },
  created(){
      this.getsportsNews(),
      this.getscienceNews(),
      this.getcarNews(),
      this.getgovernmentNews()
  }

};  
</script>


<style scoped>
.title{
    border-bottom:1px solid  #d9d9d9;
    overflow:hidden
}
.title .news{
    display:block;
    padding-top:25px;
    text-align:right;
    padding-right:15px;
}
.title .date{
    display:block;
    text-align:right;
    padding-top:8px;
    padding-right:15px;
}
.title .pic{
    float:left;
    vertical-align:center;
    padding-left:8px;
}

   .mint-navbar .mint-tab-item.is-selected{
    border-bottom:3px solid #26a2ff ;
    display:block !important;
}
.mint-search[data-v-a54832c8]{
    height:50px;
}
.mint-search{
height:0;
}
</style>

